<template>
	<x-popup v-model="show" height="70vh" @hide="close">
		<view class="flex flex-center grid-gap-4">
			<view class="w-100px"></view>
			<view class="flex-1 text-center p-4 h9 font-weight-600">请选择服务时间</view>
			<view class="w-100px flex flex-center" @tap="screenSelect = !screenSelect">
				<text class="h10 text-placeholder font-weight-600" v-if="screenSelect">查看全部时间</text>
				<text class="h10 text-primary font-weight-600" v-else>只看可选</text>
			</view>
		</view>
		<scroll-view scroll-x>
			<view class="flex grid-gap-2 flex-nowrap">
				<view class="flex-1 p-4 text-center" @tap="dateClick(index)"
					:class="index == tabIndex ? 'text-primary font-weight-600' : ''" v-for="(item, index) in tabList"
					:key="index">
					<text class="h10 text-nowrap">{{item.week}}</text>
					<text class="h9 text-nowrap">{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
		<view class="bg flex-1 px-2 py-6 grid-gap-2 grid-columns-5 overflow-y-auto flex-y-c-flex-start"
			v-if="!emptyShow">
			<template v-for="(item, index) in list" :key="index">
				<view class="grid-column-1 rounded-4 p-2 flex flex-column flex-center" :key="index"
					:class="item.state == 0 ? 'bg-primary text-white' : 'bg-dark-light-9 text-dark-light-3'"
					@tap="selected(item)" v-if="!screenSelect || (screenSelect && item.state === 0)">
					<text class="font-weight-600 h8">{{ item.time }}</text>
					<text class="h10" v-if="item.state == 0">可预约</text>
					<text class="h10" v-else-if="item.state == 2">已预约</text>
					<text class="h10" v-else-if="item.state == 1">不可选</text>
				</view>
			</template>
		</view>
		<view class="flex-1 flex flex-center" v-else>
			<x-empty type="order" text="暂无可服务时间"></x-empty>
		</view>
		<view class="pb-safe-area"></view>
	</x-popup>
</template>

<script setup lang="ts">
import { ref, watchEffect, defineProps } from 'vue';
import { $func, $api } from '@/utils';
const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const props = withDefaults(defineProps<{
	show: boolean
	technicianId: any
	serviceDuration: Number
}>(), {
	show: false,
	technicianId: 0,
	serviceDuration: 0
});
const show = ref(props.show);
const emptyShow = ref(false);
const tabIndex = ref(0);
const tabList = ref([]);
const list = ref([]);
const screenSelect = ref(true);
const emit = defineEmits(['confirm', 'update:show'])
const getServeTime = () => {
	if (!props.technicianId) { return }
	tabList.value = [];
	list.value = [];
	$api.Technician.getServiceTime(props.technicianId).then((data: any) => {
		let d: Date | undefined, tabListIndex = -1, sd = props.serviceDuration, sdIndex;
		const now = new Date();
		for (let i = 0; i < data.length; i++) {
			const item = data[i];
			for (let j = 0; j < item.matrix.length; j++) {
				let matrix = item.matrix[j];
				matrix.date = new Date(matrix.start_time.replace(/-/g, '/'));
				if (!d || d && (d.getFullYear() !== matrix.date.getFullYear() || d.getMonth() !== matrix.date.getMonth() || d.getDate() !== matrix.date.getDate())) {
					d = matrix.date;
					tabListIndex++;
					tabList.value.push({
						name: $func.getDayName(d),
						week: week[matrix.date.getDay()],
						date: d,
						list: []
					});
				}
				matrix.time = matrix.date.getHours().toString().padStart(2, '0') + ':' + matrix.date.getMinutes().toString().padStart(2, '0');
				if (matrix.date < now) {
					matrix.state = 1;
				}
				if (matrix.state === 2) {
					sdIndex = j;
					while (sd > matrix.duration) {
						sd -= matrix.duration;
						sdIndex--;
						const oldItem = tabList.value[tabListIndex].list[sdIndex];
						if (oldItem && oldItem.state === 0) {
							oldItem.state = 1;
						} else {
							sd = props.serviceDuration;
							break;
						}
					}
				}
				tabList.value[tabListIndex].list.push(matrix);
			}
		}
		let last:any=[];
		for (let i = 0; i < tabList.value.length; i++) {
			last=tabList.value[i].list;
			const item=last[tabList.value[i].list.length-1];
			if(item.date>now){
				tabList.value.splice(0,i);
				break;
			}else{
				last=[];
			}
		}
		list.value = last
	}).catch(() => {
		emptyShow.value = true;
	})
}
const dateClick = (index: number) => {
	tabIndex.value = index;
	list.value = tabList.value[index].list;
}
const selected = (item: any) => {
	if (item.state !== 0) {
		return;
	}
	item.servive_time = `${$func.getDayName(item.date)} ${item.date.getHours().toString().padStart(2, '0')}:${item.date.getMinutes().toString().padStart(2, '0')}`;
	emit('confirm', item)
	close()
}
const close = () => {
	show.value = false;
	emit('update:show', false)
}
watchEffect(() => {
	show.value = props.show;
	if (props.show) {
		getServeTime()
	}
})
</script>

<style lang="scss" scoped>
.w-100px {
	width: 100px;
}
</style>